<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
<style>
	*{margin:0;padding:0; }
	li{list-style-type: none;}
	.list{
		width:630px;
		margin: 0 auto;
	}
	.list>li{
	width:150px;
	height:50px;
	margin-left: 10px;
	background-color: #ccc;
	text-align: center;
	line-height: 50px;
	float:left; }
	.list>li:first-child{
		margin-left:0;
	}
.list>li>ul{
	padding-top: 10px;
    display:none;
}
.list>li:hover ul{
	display: block;
}
ul li{
width:150px;
height: 50px;
margin-top: 10px;
 }
 ul li:hover{
 	background-color: #ccc;
 	color: #fff;
 }
 ul li:first-child{
 	margin-top: 0;
 }
</style>
</head>
<body>
	<nav class="list">
		<li>
			item1
			<ul>
				<li>第1个</li>
				<li>第2个</li>
				<li>第3个</li>
				<li>第4个</li>
			</ul>
		</li>
		<li>item2
            <ul>
         	   <li>第1个</li>
         	   <li>第2个</li>
         	   <li>第3个</li>
         	   <li>第4个</li>
            </ul>
		 </li>
		<li>item3
            <ul>
	          <li>第1个</li>
	          <li>第2个</li>
	          <li>第3个</li>
	          <li>第4个</li>
            </ul>
		 </li>
		 <li>itme4
         <ul>
         	 <li>第1个</li>
         	 <li>第2个</li>
         	 <li>第3个</li>
         	 <li>第4个</li>
         </ul>
		 </li>
	</nav>
</body>
</html>